<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <style>

    </style>
</head>

<body>
    <div class="bbs">
        <header><span id="ft">我要发帖</span></header>
        <section>
            <ul id="tzList">
                <!-- <li>
                    <img src="./images/tou01.jpg" alt="">
                    <div class="con">
                        <p class="title1">如何学习Web前端开发</p>
                        <p class="title2">板块：新课程 发帖事件：2022-04-15 10:30:31</p>
                    </div>
                </li> -->
            </ul>
        </section>
        <div class="post">
            <input class="title" id="mytitle" placeholder="请输入标题（1-50个字符）">
            所属版块：<select id="bk">
                <option>请选择版块</option>
                <option>电子书籍</option>
                <option>新课来了</option>
                <option>新手报到</option>
                <option>职业规划</option>
            </select>
            <textarea class="content"></textarea>
            <input class="btn" id="fabu" value="发布">
        </div>
    </div>
    <script>
        function toggoleDiv() {
            let postAry = document.getElementsByClassName("post");
            // debugger
            if (postAry[0].style.display == 'none') {
                postAry[0].style.display = 'block';
            } else {
                postAry[0].style.display = 'none';
            }

        }
        //事件绑定
        document.getElementById("ft").addEventListener('click', function () {
            toggoleDiv();
        })

        document.getElementById("fabu").addEventListener('click', function () {
            let tzList = '';
            let imgs = ["./images/tou01.jpg", './images/tou02.jpg', './images/tou03.jpg', './images/tou04.jpg'];
            let imgIndex = Math.floor(Math.random() * imgs.length);


            let mytitle = document.getElementById('mytitle').value;
            let bk = document.getElementById('bk').value;

            let date = new Date();
            let dateStr = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();


            tzList += '<li>';
            tzList += '        <img src="' + imgs[imgIndex] + '" alt="">';
            tzList +=
                '        <div class="con">';
            tzList += '            <p class="title1">' + mytitle + '</p>';
            tzList +=
                '            <p class="title2">板块：' + bk + ' 发帖事件：' + dateStr + '</p>';
            tzList +=
                '        </div>';
            tzList += '    </li>';

            document.getElementById("tzList").innerHTML = document.getElementById("tzList").innerHTML + tzList;

            toggoleDiv();

        })
    </script>
</body>

</html>